使用 Hexo 經營部落格也有一陣子了，漸漸也慢慢地上手！但發現 Next 這個佈景主題有一個問題是，在比較小的裝置或是手機上瀏覽時，sidebar 會不見；但我又希望 Social Link 不會因此而消失。此時該怎麼做才能夠達成呢？

實作方法：將 Social Link 移到主選單

我自己使用的方式是將 Social Link 整個區塊移動到主選單，讓訪客點擊手機版主選單的下拉式方塊時，所彈出的主選單下方就會顯示 Social Link。實作方式如下：

修改檔案：themes/next/layout/_partials/sidebar/site-overview.swig

找到以下整串語法，差不多在第 77 行處：

{%- if theme.social %}
    <div class="links-of-author motion-element">
      {%- for name, link in theme.social %}
        <span class="links-of-author-item">
        {%- set sidebarURL = link.split('||')[0] | trim %}
        {%- if theme.social_icons.enable %}
          {%- set sidebarIcon = '<i class="' + link.split('||')[1] | trim + ' fa-fw"></i>' %}
        {%- else %}
          {%- set sidebarIcon = '' %}
        {%- endif %}
        {%- if theme.social_icons.enable and theme.social_icons.icons_only %}
          {%- set sidebarText = '' %}
        {%- else %}
          {%- set sidebarText = name %}
        {%- endif %}
          {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' → ' + sidebarURL}) }}
        </span>
      {%- endfor %}
    </div>
{%- endif %}

這整段語法即是有關於 Social Link 的部分，如果要移動到主選單，就要將它移動到主選單區塊內，而主選單部分要找到另外一個檔案。

修改檔案：themes/next/layout/_partials/header/menu.swig

找到以下這串語法：

    {%- if theme.algolia_search.enable or theme.local_search.enable %}
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger">
          {%- if theme.menu_settings.icons %}<i class="fa fa-search fa-fw"></i>{%- endif %}{{ __('menu.search') }}
        </a>
      </li>
    {%- endif %}

將剛剛複製的那段語法貼到這後面即可。

成果

以我自己部落格（使用 Scheme 為 Pisces）為例，Social Link 移動到主選單區塊裡了。至於在手機版，只要點擊主選單下拉選單，主選單下方就會出現 Social Link。

PC 版

手機版

後記

為了解決這個問題，在網路上搜尋了已久都找不到相關資訊。因此後來是到 Hexo Taiwan Facebook 社團詢問方向，因此最後就照了以上的實作方式進行。真的非常感謝 XD

所以當遇到問題且真正已經 Google 過後仍然無法解決，我認為就該到社團或是一些討論區上詢問了。也因為如此社群才能變得更加強大，而且當自己真實解決問題了之後，更能夠透過分享將整個心路歷程分享到網路上，畢竟取之於網路、回饋於網路嘛！

本篇文章同步發布於我的部落格 Gui Blog